<template>
  <div class="all" @click="toActivityDesc">
    <div class="allLeft">
      <img :src="img" />
    </div>
    <div class="allRight">
      <div>
        <div class="master">
          <b
            >发起人：<label class="activityFontColor">{{ master }}</label></b
          >
        </div>
      </div>
      <div>
        <div>
          <b
            >地点：<label class="activityFontColor">{{ address }}</label></b
          >
        </div>
      </div>
      <div>
        <div>
          <b
            >时间：<label class="activityFontColor">{{ time }}</label></b
          >
        </div>
      </div>
      <div>
        <div class="actionDesc">
          <b>活动介绍：<label class="activityFontColor">请点击查看</label></b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {
    toActivityDesc() {
      var that = this;
      this.$router.push({
        // path: "/chat",
        path: "/activityDesc",
        query: {
          // firstPeople: that.$store.state.yb_userid,
          // secendPeople: that.userid,
          // master: that.master,
          // category: that.category,
          // headImg: that.headImg,
          category: this.category,
          id: this.id,
        },
      });
    },
  },
  props: [
    "id",
    "img",
    "master",
    "address",
    "time",
    "userid",
    "category",
    "headImg",
    "desc",
  ],
};
</script>
<style scoped>
.all {
  width: 90%;

  display: flex;
}
.allLeft {
  flex: 2;
  height: 100%;
  /* padding: 3px; */
  padding-top: 12px;
}
.allRight {
  flex: 5;
  height: 100%;
  padding: 12px;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
.allRight div {
  height: 25%;
}
.allRight div div {
  height: 80%;
  position: relative;
  top: 20%;
  text-align: left;
  font-size: smaller;
}
.activityFontColor {
  color: rgb(105, 74, 61);
}
.actionDesc {
  overflow: hidden; /* 超出的文本隐藏 */
  text-overflow: ellipsis; /* 溢出用省略号显示 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
  -webkit-line-clamp: 1; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
}
</style>
